<template>
		<div id="MyOrders">
          <div  v-if="!showLoading">
  		      <!--    导航栏 -->
               <van-nav-bar
                  title="我的订单"
                  left-arrow
                  :fixed=true
                  :border=true
                  @click-left="$router.go(-1)"
               ></van-nav-bar>
                <div class="liebiao">
                        <div class="dingdan" v-for="(order,index) in Order_list" :key="order.id">
                              <van-cell-group>
                                <van-cell title-class="bianhan" value-class="status" center>
                                         <template #title>
                                              <span>订单:{{order.bianhao}}</span>
                                          </template>  
                                         <template #default>
                                               <div v-if="order.status===-1">待支付</div>
                                               <div  v-else-if="order.status===1">待发货</div>
                                               <div v-else="ordder.status===2">已完成</div>
                                          </template>                     
                                </van-cell>
                              </van-cell-group>
                              <van-cell-group>
                                  <van-cell title-class="title"  center>
                                         <template #title>
                                              <span>空心菜</span>
                                          </template>  
                                         <template #default>
                                               <div class="title">{{order.totalPrice|moneyFormat}}</div>
                                               <div class="bianhan">x1</div>
                                          </template>
                                  </van-cell>
                              </van-cell-group>
                              <van-cell-group>
                                  <van-cell title-class="title" title=' ' center>
                                         <template #default>
                                         <span style="margin-right:1rem;">商品数量:1</span><span>实付:<span  style="color:#0c0">{{order.totalPrice|moneyFormat}}</span></span>
                                          </template>
                                  </van-cell>
                              </van-cell-group>
                              <van-cell-group>
                                  <van-cell title-class="title" title=' ' center>
                                         <template #default v-if="order.status===-1">
                                               <van-button type="default" style="margin-right:10px;"  @click="deleteOrder(order.id)">删除订单</van-button>
                                               <van-button type="primary" @click="payOrder(order.id,order.bianhao,order.totalPrice)">付款</van-button>
                                          </template>
                                           <template #default v-else-if="order.status===1">
                                               <van-button type="primary">待发货</van-button>
                                          </template>
                                          <template #default v-else="ordder.status===2">
                                               <van-button type="primary">已完成</van-button>
                                          </template>
                                  </van-cell>
                              </van-cell-group>
                        </div>
               </div>

              <!-- 路由的出口 -->
              <transition name="router-slider" mode="out-in">
                <router-view></router-view>
              </transition>
          </div>
          <van-loading
                v-else
                type="spinner" 
                color="#75a342" 
                style="position:absolute;left: 50%;top: 40%;transform:translate(-50%)"
            >
               正在努力加载中....
         </van-loading> 
		</div>
</template>

<script>
 import { getOrders,deleteOrder } from './../../../service/api/index.js'  //拿到index.js 里面的getHomeData方法
  import {mapState,mapMutations} from 'vuex'
 import {Toast,Panel,Cell,CellGroup,Dialog} from 'vant'
	export default{
		name:"MyOrders",
          data(){
              return{
                //订单列表数据
                Order_list:[],
              //是否显示加载图标
              showLoading:true,
              //是否显示返回顶部的按钮
              showBackStatus:false

              }
          },

          methods:{
               async deleteOrder(id){
                  //console.log(id);
                          Dialog.confirm({
                            message: '确定删除该订单?'
                          }).then(async () => {
                                let result = await deleteOrder(id);
                                //console.log(result);
                                if(result.status==='200'){
                                   window.location.reload();
                               }
                          }).catch(() => {
                            // on cancel
                          });          
              },

              async payOrder(oid,bianhao,totalPrice){
                  this.$router.push({
                       path:`/dashboard/mine/MyOrders/pay/${oid}/${bianhao}/${totalPrice}`
                  })
              }



          },
          
          computed:{
                 ...mapState(["userInfo"]),  //取state.js里面的值，因为它能够实时监控检测，所以计算属性中
          },
           created(){    
                      getOrders(this.userInfo.token).then((response)=>{
                         console.log(response);
                              if (response.success) {
                                  this.Order_list=response.data;
                                  //隐藏加载动画
                                  this.showLoading = false;
                                  //开始监听滚动，到达一定位置显示返回顶部按钮
                                    showBack((status)=>{
                                     this.showBackStatus = status;
                                  });
                              }          
                        }).catch(error=>{
                           // todo......
                            console.log(error);
                      })   



           },
	}
</script>


<style lang="less" scoped>
     #MyOrders{
     	position:fixed;
     	top:0;
     	left:0;
     	bottom:0;
     	right:0;
     	background-color:#f5f5f5;
     	z-index:200;
      overflow-y: scroll;

     }

     .liebiao{
     	margin-top:3.2rem;
    	width:100%;

     }
     .dingdan{
        margin-right: 0.2rem;
        margin-left: 0.2rem;
        margin-top: 0.2rem;
     }
     .bianhan{
         font-size: 0.4rem;
         color: #999;     
     }
     .status{
          color: #0c0;
     }
     .title{
        font-size: 0.8rem;
        color: #666;
     }
    .router-slider-enter-active,.router-slider-leave-active{
      transition:all 0.3s;
    }

    .router-slider-enter,.router-slider-leave-active{
      transform:translate3d(2rem,0,0);
      opacity:0;
    }
</style>